<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        user-select: none;
        width: 300px;
        height: 400px;
        margin: 10px auto;
        position: relative;
        cursor: pointer;
      }
      .box a {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 1s linear;
      }
      .box a.active {
        opacity: 1;
      }
      .box a img {
        display: inline-block;
        width: 300px;
        height: 400px;
      }
      .prev,
      .next {
        background-image: url(./img/icons.png);
        background-repeat: no-repeat;
        display: inline-block;
        width: 41px;
        height: 69px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .box .prev {
        left: 10px;
        background-position: -85px 0;
      }
      .box .prev:hover {
        background-position: 0 0;
        left: 10px;
      }
      .box .next {
        right: 10px;
        background-position: -126px 0;
      }
      .box .next:hover {
        background-position: -43px 0;
      }
      .box .pages {
        position: absolute;
        right: 20px;
        bottom: 10px;
      }
      .box .pages i {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid pink;
      }
      .box .pages i:hover,
      .box .pages i.active {
        background-color: pink;
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- <a href="javascript:;" class="active"><img src="./img/1.jpg" alt="第一张"/></a>
      <a href="javascript:;"><img src="./img/2.jpg" alt="第一张" /></a>
      <a href="javascript:;"><img src="./img/3.jpg" alt="第一张" /></a>
      <a href="javascript:;"><img src="./img/4.jpg" alt="第一张" /></a>
      <a href="javascript:;"><img src="./img/5.jpg" alt="第一张" /></a> -->
      <a href="javascript:;" class="active"><img src="./img/img001.png" alt="第一张"/></a>
      <a href="javascript:;"><img src="./img/img002.png" alt="第一张" /></a>
      <a href="javascript:;"><img src="./img/img003.png" alt="第一张" /></a>
      <a href="javascript:;"><img src="./img/img004.png" alt="第一张" /></a>
      <a href="javascript:;"><img src="./img/img005.png" alt="第一张" /></a>
      <span class="prev" title="前一张"></span>
      <span class="next" title="后一张"></span>

      <div class="pages">
        <i class="active"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <script>
      var box = document.querySelector(".box");
      var imgs = document.querySelectorAll(".box a");
      var prev = document.querySelector(".prev");
      var next = document.querySelector(".next");
      var dots = document.querySelectorAll(".pages i");
      var index = 0;
      next.onclick = function (e) {
        showImg(index, e);
      };
      prev.onclick = function (e) {
        showImg(index, e);
      };
      for (let i = 0; i < dots.length; i++) {
        dots[i].addEventListener("click", function (e) {
          showImg(i, e);
        });
      }
      function showImg(idx, e) {
        //   注意判断条件。 前一张 后一张 小点点
        if (e.target.classList.contains("prev")) {
          idx === 0 ? (index = imgs.length - 1) : index--;
        } else if (e.target.classList.contains("next")) {
          idx === imgs.length - 1 ? (index = 0) : index++;
        } else {
          index = idx;
        }
        imgs.forEach((v,i)=>{
            i === index ? (v.classList.add("active"),dots[i].classList.add("active"))
            : (v.classList.remove("active"),dots[i].classList.remove("active"))
        })
      }

      var timer = setInterval(function(){
          next.click();
      },2000)
      box.onmouseover = function(){
          clearInterval(timer)
      }
      box.onmouseout = function(){
        timer = setInterval(function(){
            next.click()
        },2000)
      }
    </script>
  </body>
</html>
